import React, {Component} from 'react'

import 'component/common.scss'
import './Main.scss'
import NavHeader from 'component/NavHeader/NavHeader.jsx'

class Main extends Component{
  constructor(props){
    super(props)
    this.maxCount = 140
    this.state = {
      count: this.maxCount,
      startIndex: 0
    }
  }
  componentDidMount(){
    this.commentInput.addEventListener('compositiondatart', () => {
      this.chineseInputing = true
    })
    this.commentInput.removeEventListener('compositiondatart', (e) => {
      this.chineseInputing = false
      this.onInput(e.target.value)
    })
  }
  doStar(i){
    this.setState({
      startIndex: i
    })
  }
  renderStar(){
    let arr = []
    for(let i = 0; i < 5; i++){
      let cls = i >= this.state.startIndex ? 'star-item' : 'star-item light'
      arr.push(
        <div onClick={() => this.doStar(i)} key={i} className={cls}></div>
      )
    }
    return arr
  }
  onInput(){
    let num = value.maxLength
    if(!this.chineseInputing){
      this.setState({
        count: this.maxCount - num
      })
    }
  }
  render(){
    return(
      <div className='content'>
        <NavHeader title='评价' />
        <div className="comment-content">
          <div className="star-area">
            {this.renderStar()}
          </div>
          <div className="comment">
            <textarea refs={(ref) => {this.commentInput = ref}} onChange={(e) => this.onInput(e.target.value)} maxLength='140' placeholder='请填写评价' className='comment-input'></textarea>
            <span className='count'>{this.state.count}</span>
          </div>
          <p className="one-line product-name"></p>
        </div>
        <div className="submit">提交评价</div>
      </div>
    )
  }
}

export default Main